import 'package:dali_ng_pera/global/dnp_global_manager.dart';
import 'package:dali_ng_pera/page/browser/dnp_browser_page.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ios_keyboard_action/ios_keyboard_action.dart';
import 'dnp_register_controller.dart';

class DnpRegisterPage extends StatefulWidget {
  const DnpRegisterPage({super.key});

  @override
  State<DnpRegisterPage> createState() => _DnpRegisterPageState();
}

class _DnpRegisterPageState extends State<DnpRegisterPage> {
  final controller = Get.put(DnpRegisterController());

  @override
  void initState() {
    super.initState();
    controller.ctx = context;
  }

  @override
  void dispose() {
    Get.delete<DnpRegisterController>();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset:  false,
      body: GestureDetector(
        onTap: (){
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Stack(
          children: [_bgWidget(), _contentWidget()],
        ),
      ),
    );
  }

  Widget _bgWidget() {
    return Positioned(
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        child: Image.asset(
          "assets/images/ic_base_bg.webp",
          fit: BoxFit.cover,
        ));
  }

  Widget _contentWidget() {
    return Positioned(
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      child: SafeArea(
          child: Stack(
        children: [
          Positioned(
              top: 14,
              left: 14,
              child: GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Image.asset(
                  width: 34,
                  height: 34,
                  'assets/images/ic_certification_back.png',
                ),
              )),
          Positioned(
            top: 47,
            left: 0,
            right: 0,
            bottom: 0,
            child: Column(
              children: [
                Container(
                  height: 115,
                  child: Image.asset(
                    'assets/images/ic_register_logo.webp',
                  ),
                ),
                SizedBox(height: 18),
                GetBuilder<DnpRegisterController>(
                    id: "updateClickCode",
                    builder: (controller) {
                      return Container(
                        margin: EdgeInsets.only(left: 14, right: 14),
                        height: controller.hasClickCode ? 331 : 237,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius:
                                BorderRadius.all(Radius.circular(20))),
                        child: Padding(
                          padding: const EdgeInsets.only(left: 14, right: 14),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              SizedBox(height: 14),
                              _topWidget(),
                              SizedBox(height: 14),
                              _bottomWidget(),
                              SizedBox(height: 14),
                              _vozWidget(),
                              _descWidget()
                            ],
                          ),
                        ),
                      );
                    })
              ],
            ),
          ),
          _registerWidget()
        ],
      )),
    );
  }

  Widget _topWidget() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Phone number',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w500,
            color: Color(0xFF333333),
          ),
        ),
        SizedBox(height: 12),
        Container(
          height: 49,
          padding: EdgeInsets.only(left: 14),
          decoration: BoxDecoration(
            color: Color(0xFFE9F5FF),
            borderRadius: BorderRadius.all(Radius.circular(20)),
          ),
          child: IOSKeyboardAction(
            focusNode: controller.topNode,
            backgroundColor:Colors.grey.shade300,
            label: "Done",
            textColor: Colors.blue,
            focusActionType: FocusActionType.done,
            onTap: (){
              FocusScope.of(context).requestFocus(FocusNode());
            },
            child: TextField(
                controller: controller.topTextController,
                keyboardType: TextInputType.number,
                focusNode: controller.topNode,
                autofocus:  true,
                decoration: InputDecoration(
                    hintText: 'Enter your phone number',
                    hintStyle: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w400,
                      color: Color(0xFFABABAB),
                    ),
                    border: InputBorder.none)),
          ),
        )
      ],
    );
  }

  Widget _bottomWidget() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Verification code',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w500,
            color: Color(0xFF333333),
          ),
        ),
        SizedBox(height: 12),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Container(
                height: 49,
                padding: EdgeInsets.only(left: 14),
                decoration: BoxDecoration(
                  color: Color(0xFFE9F5FF),
                  borderRadius: BorderRadius.all(Radius.circular(20)),
                ),
                child: IOSKeyboardAction(
                  focusNode: controller.bottomNode,
                  backgroundColor:Colors.grey.shade300,
                  label: "Done",
                  textColor: Colors.blue,
                  focusActionType: FocusActionType.done,
                  onTap: (){
                    FocusScope.of(context).requestFocus(FocusNode());
                  },
                  child: TextField(
                      controller: controller.bottomTextController,
                      keyboardType: TextInputType.number,
                      focusNode: controller.bottomNode,
                      decoration: InputDecoration(
                          hintText: 'Verification code',
                          hintStyle: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w400,
                            color: Color(0xFFABABAB),
                          ),
                          border: InputBorder.none)),
                ),
              ),
            ),
            SizedBox(width: 10),
            GestureDetector(
              onTap: () {
                controller.diRequest();
              },
              child: Container(
                width: 99,
                height: 49,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(20)),
                  color: Color(0xFFFFE601),
                ),
                child: GetBuilder<DnpRegisterController>(
                    id: "updateDuration",
                    builder: (controller) {
                      return Text(
                        controller.bottomTitle(),
                        style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            color: Color(0xFF252630)),
                      );
                    }),
              ),
            )
          ],
        )
      ],
    );
  }

  Widget _vozWidget() {
    return GestureDetector(
      onTap: (){
        controller.christosRequest();
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Image.asset(
            'assets/images/ic_register_voice.webp',
            width: 18,
            height: 18,
          ),
          SizedBox(width: 4),
          Text(
            'VOZ',
            style: TextStyle(
              fontSize: 14,
              color: Color(0xFF0193FE),
              decoration: TextDecoration.underline,
              decorationColor: Color(0xFF0193FE),
            ),
          )
        ],
      ),
    );
  }

  Widget _descWidget() {
    return Visibility(
      visible: controller.hasClickCode,
      child: Padding(
        padding: const EdgeInsets.only(top: 12),
        child: Text(
          '*Reminder: Your verification code is valid for 30 minutes. Please make sure you operate it yourself and do not share the verification code with others.',
          style: TextStyle(
            fontSize: 14,
            height: 1.4,
            color: Color(0xFFF14343),
          ),
        ),
      ),
    );
  }

  Widget _registerWidget() {
    return Positioned(
        bottom: 40,
        left: 14,
        right: 14,
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                GetBuilder<DnpRegisterController>(
                    id: "updateIsChecked",
                    builder: (controller) {
                      return GestureDetector(
                        onTap: () {
                          controller.isChecked = !controller.isChecked;
                          controller.update(["updateIsChecked"]);
                        },
                        child: Image.asset(
                            width: 18,
                            height: 18,
                            'assets/images/ic_base_${controller.isChecked ? 'checkbox' : 'uncheckbox'}.webp'),
                      );
                    }),
                SizedBox(width: 4),
                Text(
                  'I have read and agree',
                  style: TextStyle(fontSize: 14, color: Color(0xFF252630)),
                ),
                SizedBox(width: 4),
                GestureDetector(
                  onTap: (){
                    Get.to(DnpBrowserPage(path: DnpGlobalManager().splashEntity.hemeis ?? ""));
                  },
                  child: Text(
                    'Privacy Policy',
                    style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w500,
                        color: Color(0xFF1D4AC8),
                      decoration: TextDecoration.underline,
                      decorationColor: Color(0xFF1D4AC8),
                    ),
                  ),
                )
              ],
            ),
            SizedBox(height: 14),
            GestureDetector(
              onTap: (){
                controller.iesousRequest();
              },
              child: Container(
                height: 48,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/ic_register_btn.webp'),
                    fit: BoxFit.fill,
                  ),
                ),
                child: Text(
                  'Login',
                  style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
              ),
            )
          ],
        ));
  }
}
